<template>
	<view class="box" v-if="dataForm.name">
		<view class="top">
			<view class="top-tags">
				<view class="title-top">{{dataForm.name}}</view>
				<view class="tags">
					<view class="tag-info">
						<view class="tag-info-text">{{dataForm.categoryName}}</view>
					</view>
					<view class="tag-unStart"
						:class="[trainState==1?'title-close':trainState==2?'title-dyz':'title-overdue']">
						{{trainState==1?'未开始':trainState==2?'已开始':'已逾期'}}
					</view>
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					创建时间
				</view>
				<view class="right1">
					{{dataForm.createTime}}
				</view>
			</view>
		</view>
		<view class="kiss-list" style="margin-bottom: 20rpx;">
			<view class="kiss-list-title">
				<view class="left">
					创建人
				</view>
				<view class="right1">
					{{dataForm.createUserName}}
				</view>
			</view>
		</view>
		<view class="my-title">
			培训基本信息
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训时间
				</view>
				<view class="right1">
					{{dataForm.trainStartTime}}至{{dataForm.trainEndTime}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训人员
				</view>
				<view class="right1" style="flex: 1;" v-if="dataForm.signNames.length>3">
					{{dataForm.signNames.join(',').substr(0,10)}}...等{{dataForm.signNames.length}}人 <span
						style="margin-left: 6rpx;color: rgba(15, 83, 172, 1);"
						@click="handleAll(dataForm.signNames)">查看全部</span>
				</view>
				<view class="right1" v-else>
					{{dataForm.signNames.join(",")}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训地址
				</view>
				<view class="right1">
					{{dataForm.address}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训老师
				</view>
				<view class="right1">
					{{dataForm.trainTeacher}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					计划学时
				</view>
				<view class="right1">
					{{dataForm.learnDuration}}学时
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					培训方式
				</view>
				<view class="right1">
					{{dataForm.trainWay == 1?'线上':'线下'}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					考核方式
				</view>
				<view class="right1">
					{{renderAssessWay(dataForm.assessWay)}}
				</view>
			</view>
		</view>
		<view class="kiss-list">
			<view class="kiss-list-title">
				<view class="left">
					记录人
				</view>
				<view class="right1">
					{{dataForm.recorderName}}
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="kiss-list" v-if="dataForm.courseId != ''">
			<view class="my-title">
				关联课程
			</view>
			<view class="kcInfo">
				<image class="kcInfo-img" :src="unionData.courseImage" mode=""></image>
				<view class="kcInfo-con">
					<view class="name">
						{{unionData.courseName}}
					</view>
					<view class="name2">
						学习进度: {{unionData.hadCourseNum}}/{{unionData.courseUserNum}}
					</view>
					<view class="name2">
						学习开始时间: {{unionData.courseBeginTime}}
					</view>
				</view>
			</view>
			<view class="kcBtn" v-if="trainState != 3">
				<view v-if="dataForm.joinFlag==1" :style="trainState == 1 ? 'color: rgba(176, 176, 176, 1.0);': ''"
					:class="userId == dataForm.recorderId?'learn':'learn-all'" @click="goLearn()">
					{{dataForm.studyStatus == 2 ?"已学习":"去学习"}}
				</view>
				<view v-if="userId == dataForm.recorderId"
					:style="trainState == 1 ? 'color: rgba(176, 176, 176, 1.0);': ''"
					:class="dataForm.joinFlag==1?'selectJd':'selectJd-all'" @click="selectJinDu(0)">
					查看进度
				</view>
			</view>
		</view>
		<view class="line8"></view>
		<view class="kiss-list" v-if="dataForm.examPaperId != ''">
			<view class="my-title">
				关联试卷
			</view>
			<view class="kcInfo">
				<image class="kcInfo-img" :src="unionData.examPaperImage" mode=""></image>
				<view class="kcInfo-con">
					<view class="name">
						{{unionData.examPaperName}}
					</view>
					<view class="name2">
						考试进度: {{unionData.hadExamNum}}/{{unionData.examUserNum}}
					</view>
					<view class="name2">
						考试开始时间: {{unionData.examBeginTime}}
					</view>
				</view>
			</view>
			<view class="kcBtn" v-if="trainState != 3">
				<view v-if="dataForm.examFlag == 1"
					:style="trainState == 1 || (dataForm.trainWay == 1&&dataForm.studyStatus != 2) ? 'color: rgba(176, 176, 176, 1.0);': ''"
					:class="userId == dataForm.recorderId?'learn':'learn-all'" @click="goExam()">
					去考试
				</view>
				<view v-else-if="dataForm.examFlag == 3" :class="userId == dataForm.recorderId?'learn':'learn-all'"
					@click="lookLearninfo()">已考试</view>
				<view v-if="userId == dataForm.recorderId"
					:style="trainState == 1 ? 'color: rgba(176, 176, 176, 1.0);': ''"
					:class="dataForm.examFlag == 1 || dataForm.examFlag == 3?'selectJd':'selectJd-all'"
					@click="selectJinDu(1)">
					查看进度
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<!-- <view class="bottom-subside"></view>
		<view class="bottom-subside"></view> -->


		<view class="kiss-bottom-once" v-if="trainState == 2||trainState == 1">
			<template v-if="userId != dataForm.recorderId">
				<template v-if="dataForm.signFlag==1 && dataForm.joinFlag==1">
					<view v-if="dataForm.signImg || sign" class="btn-right" @click="$dianji(handleSeeSign,'onoff2')">
						查看签名
					</view>
					<template v-else>
						<view v-if="isSign" class="btn-right" @click="$dianji(handleCheckSign,'onoff1')">
							一键签到
						</view>
						<view v-else class="btn-left" @click="$dianji(handleToSetSign,'onoff3')">
							去签到
						</view>
					</template>
				</template>
			</template>


			<!-- <view class="btn-right" v-else-if="!dataForm.signFlag && dataForm.joinFlag" @click="$dianji(sumbit,'onoff')">去学习 -->
			<view v-if="userId == dataForm.recorderId" class="btn-right maTop"
				@click="$dianji(handleToRecord,'onoff5')">{{isRecord?'继续':'去'}}记录</view>

			<!-- <view class="btn-right maTop"
				v-if="trainState != 1 && (dataForm.recorderId === userId || dataForm.createUserId === userId)"
				@click="$dianji(delRecord,'onoff4')">删除</view> -->
		</view>

		<!-- <view class="kiss-bottom-once" >
			
		</view> -->
		<view class="kb-btn">

		</view>
	</view>
</template>

<script>
	import loadingIcon from '../../../uni_modules/uview-ui/libs/config/props/loadingIcon'
	export default {
		data() {
			return {
				onoff1: true,
				onoff2: true,
				onoff3: true,
				onoff4: true,
				onoff5: true,
				// 培训id
				id: '',
				// 培训状态
				trainState: '',
				dataForm: {},
				// 当前登录人id
				userId: uni.getStorageSync('userInfo').userId,
				// 是否设置过签名
				isSign: false,
				// 设置过签名,后台存储的图片
				oldSig: '',
				// 当前页面设置的签名
				sign: '',
				// 是否记录过
				isRecord: false,
				unionData: {

				},

			}
		},
		onLoad(options) {
			this.id = options.id
			this.trainState = options.trainState
			this.initData()
			this.getSign()
			this.getUnionData()
		},
		// onUnload() {
		// 	var pages = getCurrentPages(); //当前页面栈
		// 	if (pages.length > 1) {
		// 		var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象
		// 		beforePage.data.refreshIfNeeded = true;
		// 	}
		// },
		onShow() {
			var pages = getCurrentPages(); // 获取当前页面栈
			var currentPage = pages[pages.length - 1]; // 当前页面
			if (currentPage.data.refreshIfNeeded) {
				currentPage.data.refreshIfNeeded = false;
				this.getSign(true)
			}
			if (currentPage.data.recordNeeded) {
				currentPage.data.recordNeeded = false
				this.getUnionData()
				this.initData()
			}
		},
		methods: {
			getUnionData() {
				uni.$u.http.get(`/train/mobile/train/getUnionData/${this.id}`).then(res => {
					if (res.code == 0) {
						this.unionData = res.data
					}
				})
			},
			// 获取当前登录人信息
			getSign(type = false) {
				uni.$u.http.get(`/base/mobile/userInfo/getLoginUserInfo`).then(res => {
					if (res.code == 0) {
						// this.userId = res.data.id
						if (res.data.userSign) {
							this.isSign = true
							this.oldSign = res.data.userSign
							if (type) {

								const params = {
									trainId: this.dataForm.id,
									signImg: res.data.userSign
								}
								uni.$u.http.post(`/train/mobile/train/signIn`, params).then(rt => {
									if (rt.code == 0) {
										this.sign = res.data.userSign
									}
								}).catch(err => {})
							}
						}
					}
				}).catch(err => {})
			},
			initData() {
				uni.$u.http.get(`/train/mobile/train/trainDetail/${this.id}`).then(res => {
					if (res.code == 0) {
						this.dataForm = res.data
						if (res.data.trainRecord) {
							this.isRecord = true
						}
					}
				}).catch(err => {})
			},
			renderAssessWay(str) {
				let typeArr = ['笔试', '实操']
				let arr = []
				str.split(',').map(item => {
					arr.push(typeArr[item - 1])
				})
				return arr.join(',')
			},
			// 一键签名
			handleCheckSign() {
				if (this.trainState == 1) {
					uni.$u.toast("培训暂未开启")
				} else {
					const params = {
						trainId: this.dataForm.id,
						signImg: this.oldSign
					}
					uni.$u.http.post(`/train/mobile/train/signIn`, params).then(res => {
						if (res.code == 0) {
							uni.$u.toast('签到成功')
							this.sign = this.oldSign
						}
					}).catch(err => {})
				}

			},
			// 查看签名
			handleSeeSign() {
				if (this.trainState == 1) {
					uni.$u.toast("培训暂未开启")
				} else {
					uni.$u.http.get(
						`/base/upload/bindFileUrl?fileUrl=${this.dataForm.signImg || this.sign}`
					).then(res => {
						if (res.code == 0) {
							uni.navigateTo({
								url: `/pages/subPackagesD/mycenter/sginselect?url=
								${encodeURIComponent(JSON.stringify(res.data))}&noShow=true`
							})
						}
					}).catch(err => {})
				}
			},
			// 去签到
			handleToSetSign() {
				if (this.trainState == 1) {
					uni.$u.toast("培训暂未开启")
				} else {
					uni.navigateTo({
						url: `/pages/subPackagesD/mycenter/signname?nameType=sign`
					})
				}
			},
			// 删除记录
			delRecord() {
				const {
					createUserId,
					recorderId,
					id
				} = this.dataForm
				// if (!(recorderId === this.userId || createUserId === this.userId)) {
				// 	uni.$u.toast('当前无权操作');
				// 	return
				// }
				uni.showModal({
					title: '提示',
					content: '确定删除该培训?',
					success: (res) => {
						if (res.confirm) {
							uni.$u.http.post(`/train/mobile/train/deleteTrain/${id}`).then(res => {
								if (res.code == 0) {
									uni.$u.toast('删除成功');
									setTimeout(() => {
										uni.navigateBack({
											delta: 1 //返回层数，2则上上页
										});
									}, 1000)
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 去记录
			handleToRecord() {
				if (this.trainState == 1) {
					uni.$u.toast("培训暂未开启")
				} else {
					uni.navigateTo({
						url: `/pages/subPackagesC/mineTrain/trainSuccess?id=${this.dataForm.id}&trainWay=${this.dataForm.trainWay}`
					})
				}
			},
			sumbit() {},

			//去考试
			goExam() {
				if (this.trainState == 1) {
					uni.$u.toast("培训暂未开启，无法考试")
					return
				}
				if (this.dataForm.trainWay == 1 && this.dataForm.studyStatus != 2) {
					uni.$u.toast("请完成课程学习后,进行考试")
					return
				}

				uni.navigateTo({
					url: `/pages/subPackagesC/exam/examwait?examPaperId=${this.unionData.examPaperId}&trainId=${this.dataForm.id}&formType=${'peixun2'}`
				})


			},

			//去学习
			goLearn() {
				if (this.trainState == 1) {
					uni.$u.toast("培训暂未开启，无法学习")
					return
				}


				uni.navigateTo({
					url: `/pages/subPackagesC/learning/learninfo?id=${this.unionData.courseId}&trainId=${this.dataForm.id}&type=${2}&current=${0}`
				})

			},
			// 查看试卷详情
			lookLearninfo() {
				// 已考试
				uni.navigateTo({
					url: `/pages/subPackagesC/exam/examfinish?trainId=${this.id}&examPaperId=${this.unionData.examPaperId}&formType=${'peixun'}`
				})
			},

			//查看进度
			selectJinDu(type) {
				if (this.trainState == 1) {
					uni.$u.toast("培训暂未开启，暂无进度")
					return
				}
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainSchedule?type=${type}&trainId=${this.dataForm.id}&isKecheng=${this.dataForm.courseId != ''}&isKaoshi=${this.dataForm.examPaperId != ''}&isQiandao=${this.dataForm.signFlag == 1}`
				})
			},
			// 查看全部
			handleAll(list) {
				uni.navigateTo({
					url: `/pages/subPackagesC/mineTrain/trainPerson?personList=${list}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		height: 100vh;
		background: rgba(245, 245, 245, 1);

		.top {
			background-color: #fff;
			padding: 32rpx;
			border-bottom: 2rpx solid #F5F5F5;

			.top-tags {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;


				.title-top {
					word-break: break-all;
					word-wrap: break-word;
					font-size: 34rpx;
					margin-bottom: 12rpx;
					font-weight: 500;
				}

				.tags {
					display: flex;
					// justify-content: space-between;
					align-items: center;

					.tag-info {
						border-radius: 4px;
						padding: 4px 12px 4px 12px;
						line-height: 17.38px;
						background-color: rgba(140, 140, 140, 0.2);
						color: #8C8C8C;
						margin-right: 24rpx;
						font-weight: 500;
					}

					.tag-unStart {
						min-width: 74rpx;
						width: 74rpx;
						border-radius: 4px;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 4px 12px;
						font-weight: 500;
					}
				}



				.title-close {
					color: rgba(237, 118, 21, 1);
					background: rgba(252, 119, 10, 0.2);
				}

				.title-dyz {
					background-color: rgba(15, 83, 172, 0.2);
					color: #0F53AC;
				}

				.title-finish {
					color: rgba(2, 173, 130, 1);
					background: rgba(40, 184, 105, 0.2);
				}

				.title-overdue {
					color: #FF4D4D;
					background-color: rgba(255, 77, 77, 0.2);
				}
			}
		}

		.my-title {
			background-color: #fff;
			padding: 32rpx 32rpx 0 32rpx;
			font-size: 17px;
			font-weight: 500;
		}
	}

	.kcInfo {
		padding: 32rpx;
		display: flex;

		.kcInfo-img {
			min-width: 160rpx;
			width: 160rpx;
			height: 160rpx;
			margin-right: 32rpx;
		}

		.kcInfo-con {
			align-items: flex-end;

			.name {
				font-size: 16px;
				font-weight: 400;
				color: #2B2B2B;
				margin-bottom: 16rpx;
			}

			.name2 {
				font-size: 15px;
				font-weight: 400;
				color: #4D4D4D;
			}
		}
	}

	.kcBtn {
		display: flex;
		text-align: center;

		.learn {
			width: 50%;
			border: 2rpx solid rgba(242, 242, 242, 1);
			padding: 28rpx 0;
			color: black;
		}

		.learn-all {
			width: 100%;
			border: 2rpx solid rgba(242, 242, 242, 1);
			padding: 28rpx 0;
			color: black;
		}

		.selectJd {
			width: 50%;
			border: 2rpx solid rgba(242, 242, 242, 1);
			padding: 28rpx 0;
			color: rgba(15, 83, 172, 1);
		}

		.selectJd-all {
			width: 100%;
			border: 2rpx solid rgba(242, 242, 242, 1);
			padding: 28rpx 0;
			color: rgba(15, 83, 172, 1);
		}
	}

	.kb-btn {
		height: 300rpx;
	}

	.maTop {
		margin-top: 12rpx;
	}
</style>
